.box, details {
  margin: 1.5625em 0;
  padding: 0 .6rem;
  overflow: hidden;
  color: $color-text;
  font-size: 1rem;
  page-break-inside: avoid;
  background-color: $color-back;
  border-left: .3rem solid $color-secondary;
  border-radius: .1rem;
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, .05), 0 0 0.05rem rgba(0, 0, 0, .1);

  .box-title {
    position: relative;
    margin: 0 -0.6rem 1rem;
    padding: .4rem .6rem .4rem 2rem;
    font-weight: 700;

    &::before {
      position: absolute;
      font-family: "Font Awesome 5 Free";
      font-size: 0.875rem;
      text-align: center;
      top: 0.6rem;
      left: 0.6rem;
      width: 1rem;
      height: 1rem;
      content: "";
    }
  }

  &.tip {
    border-color: $color-tip;

    .box-title {
      background-color: transparentize($color: $color-tip, $amount: 0.9);

      &::before {
        color: $color-tip;
        content: "\f06d";
      }
    }
  }

  &.warning {
    border-color: $color-warning;

    .box-title {
      background-color: transparentize($color: $color-warning, $amount: 0.9);

      &::before {
        color: $color-warning;
        content: "\f071";
      }
    }
  }

  &.failure {
    border-color: $color-danger;

    .box-title {
      background-color: transparentize($color: $color-danger, $amount: 0.9);

      &::before {
        color: $color-danger;
        content: "\f057";
      }
    }
  }

  &.success {
    border-color: $color-success;

    .box-title {
      background-color: transparentize($color: $color-success, $amount: 0.9);

      &::before {
        color: $color-success;
        content: "\f058";
      }
    }
  }

  &.question {
    border-color: $color-purple;

    .box-title {
      background-color: transparentize($color: $color-purple, $amount: 0.9);

      &::before {
        color: $color-purple;
        content: "\f059";
      }
    }
  }

  &.summary {
    border-color: $color-secondary;

    .box-title {
      background-color: transparentize($color: $color-secondary, $amount: 0.9);

      &::before {
        color: $color-secondary;
        content: "\f02d";
      }
    }
  }
}

details {
  display: block;
  padding-top: 0;
  overflow: visible;

  &:not([open]) {
    padding-bottom: 0;

    & > summary {
      border-bottom-right-radius: .1rem;
    }
  }

  &[open] > summary::after {
    transform: rotate(90deg);
  }

  summary {
    position: relative;
    margin: 0 -0.6rem;
    font-weight: 700;
    display: block;
    min-height: 1rem;
    padding: .4rem 1.8rem .4rem 2rem;
    border-top-right-radius: .1rem;
    cursor: pointer;
    background-color: transparentize($color: $color-secondary, $amount: 0.9);

    &::-webkit-details-marker {
      display: none;
    }

    &:first-of-type {
      list-style-type: none;
    }

    &::before, &::after {
      position: absolute;
      font-family: "Font Awesome 5 Free";
      font-size: 0.875rem;
      top: 0.6em;
      text-align: center;
      width: 1rem;
      height: 1rem;
    }

    &::before {
      left: 0.6rem;
      color: $color-secondary;
      content: "\f02d";
    }

    &::after {
      right: 0.6rem;
      color: currentColor;
      transform: rotate(0deg);
      transition: transform 250ms;
      content: "\f054";
    }
  }
}
